/** *通用形select */
<template>
    <div>{{ optionValue }}</div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import { findBySelectNameDefaultApi } from '@/apis';
    import { isPhone } from '@/utils';

    import { useRoute, useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useStore } from '@/store';
    import { ElMessage } from 'element-plus';
    import { Lock, User, Monitor, Phone, Search, RefreshRight } from '@element-plus/icons-vue';

    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const optionValue: Ref<any> = ref('');

    // const defaultValue = defineModel<any>({
    //     required: false,
    //     default: ''
    // })
    const newOptions: Ref<any[]> = ref([]);
    const {
        dictionary = {},
        value = '',
        multiple = false,
        options = [],
    } = defineProps<{
        dictionary?: any;
        value?: any;
        multiple?: boolean;
        options?: any[];
    }>();
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // tableSearch: [data: any],
    }>();

    if (dictionary?.name) {
        findBySelectNameDefaultApi({
            name: dictionary?.name,
        }).then((res: any) => {
            newOptions.value = res.data;
            if (value || value == 0 || value == '') {
                if (multiple) {
                    let arr = value.split(',');
                    let val = [];
                    for (let i1 in arr) {
                        for (let i2 in res.data) {
                            if (res.data[i2].value == arr[i1]) {
                                optionValue.value = res.data[i2].label;
                                val.push(res.data[i2].label);
                            }
                        }
                    }
                    optionValue.value = val.join(',');

                    // for (let i in res.data) {
                    //     if (res.data[i].value == value) {
                    //         optionValue.value = res.data[i].label
                    //     }
                    // }
                } else {
                    for (let i in res.data) {
                        if (res.data[i].value == value) {
                            optionValue.value = res.data[i].label;
                        }
                    }
                }
            } else {
                optionValue.value = value;
            }
        });
    } else {
        if (options.length > 0 && (value || value == false)) {
            if (multiple) {
                let arr = value.split(',');
                let val = [];
                for (let i1 in arr) {
                    for (let i2 in options) {
                        if (options[i2].value == arr[i1]) {
                            optionValue.value = options[i2].label;
                            val.push(options[i2].label);
                        }
                    }
                }
                optionValue.value = val.join(',');
            } else {
                for (let i in options) {
                    if (options[i].value == value) {
                        optionValue.value = options[i].label;
                    }
                }
            }
        } else {
            optionValue.value = value;
        }
    }
    watch(
        () => value,
        (nval: any, oval) => {
            if (newOptions.value.length > 0 && value) {
                if (multiple) {
                    let arr = value.split(',');
                    let val = [];
                    for (let i1 in arr) {
                        for (let i2 in newOptions.value) {
                            if (newOptions.value[i2].value == arr[i1]) {
                                optionValue.value = newOptions.value[i2].label;
                                val.push(newOptions.value[i2].label);
                            }
                        }
                    }
                    optionValue.value = val.join(',');
                } else {
                    for (let i in newOptions.value) {
                        if (newOptions.value[i].value == value) {
                            optionValue.value = newOptions.value[i].label;
                        }
                    }
                }
            }
        }
    );
</script>

<style lang="scss" scoped></style>
